<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>华为手机商城</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <%--<link href="../../static/boostrap/bootstrap-3.3.7-dist/js/bootstrap.min.js" rel="stylesheet" >--%>
    <link rel="stylesheet" href="../../static/shopping/css/style.css">
    <script src="../../static/shopping/js/jquery-1.8.3.min.js"></script>
    <script src="../../static/shopping/js/banner.js"></script>
</head>
<body>

<div class="row">
    <div class="zctop">
        <div class="zc" style="width: 1200px; margin:0 auto;">
            <img src="../../static/shopping/images/zc.png" alt="">　｜　华为商城　<a
                href="${pageContext.request.contextPath}/toIndex">返回首页</a>
        </div>
    </div>
</div>

<div class="container">
            <div class="buy">
                <h3>我的购物车</h3>

                <ul class="buybt">
                    <li>
                        <%--<input type="checkbox" name="box" id="c1">--%>
                        批量删除
                    </li>
                    <li>商品</li>
                    <li>名称</li>
                    <li>单价</li>
                    <li>优惠</li>
                    <li>操作</li>
                </ul>

                <ul class="buynr1">
                    <c:forEach items="${phonesInfo}" var="phonesInfo">
                        <li class="check_phone">
                            <input data="${phonesInfo.price}" class="check_" type="checkbox"
                            name="str[]" value="${phonesInfo.id}">

                        </li>
                        <li><img src="../../static/shopping/images/${phonesInfo.url}" alt=""></li>
                        <li>${phonesInfo.name}</li>
                        <li>¥<span class="price_one">${phonesInfo.price}</span></li>
                        <li style="color:red">¥0.00元</li>

                        <li><a href="javascript:;" onclick="del_cart(${phonesInfo.id})">删除</a></li>
                    </c:forEach>
                </ul>
            </div>

    <form class="listForm" method="post" action="${pageContext.request.contextPath}/findByPage">
    <div class="row">
        <div class="form-inline">
        <label style="font-size:14px;margin-top:22px;">
            <strong>共<b>${requestScope.page.totalCount}</b>条记录，共<b>${requestScope.page.totalPage}</b>页</strong>
            &nbsp;
            &nbsp;
            <strong>每页显示</strong>
            <input name="pageCode" value="${requestScope.page.pageCode}" hidden="hidden"/>
            <select class="form-control" name="pageSize">
                <option value="2"
                        <c:if test="${requestScope.page.pageSize == 2}">selected</c:if> >2
                </option>
                <option value="3"
                        <c:if test="${requestScope.page.pageSize == 3}">selected</c:if> >3
                </option>
                <option value="4"
                        <c:if test="${requestScope.page.pageSize == 4}">selected</c:if> >4
                </option>
                <option value="5"
                        <c:if test="${requestScope.page.pageSize == 5}">selected</c:if> >5
                </option>
            </select>
            <strong>条</strong>
            &nbsp;
            &nbsp;
            <strong>到第</strong>&nbsp;<input type="text" size="3" id="page" name="pageCode"
                                            class="form-control input-sm"
                                            style="width:11%"/>&nbsp;<strong>页</strong>
            &nbsp;
            <button type="submit" class="btn btn-sm btn-info">GO!</button>
        </label>

    <ul class="pagination" style="float:right;">
        <li>
            <a href="<%=basePath%>/toCart_list"><strong>首页</strong></a>
        </li>
        <li>
            <%--<c:if test="${requestScope.page.pageCode > 2}">--%>
                <a  href="<%=basePath%>/toCart_list">&laquo;</a>
            <%--</c:if>--%>
        </li>

        <c:choose>
            <c:when test="${requestScope.page.totalPage <= 5}">
                <c:set var="begin" value="1"/>
                <c:set var="end" value="${requestScope.page.totalPage}"/>
            </c:when>
            <c:otherwise>
                <c:set var="begin" value="${requestScope.page.pageCode - 1}"/>
                <c:set var="end" value="${requestScope.page.pageCode + 3}"/>

                <!-- 头溢出 -->
                <c:if test="${begin < 1}">
                    <c:set var="begin" value="1"/>
                    <c:set var="end" value="5"/>
                </c:if>

                <!-- 尾溢出 -->
                <c:if test="${end > requestScope.page.totalPage}">
                    <c:set var="begin" value="${requestScope.page.totalPage -4}"/>
                    <c:set var="end" value="${requestScope.page.totalPage}"/>
                </c:if>
            </c:otherwise>
        </c:choose>


        <%--显示页码--%>
        <c:forEach var="i" begin="${begin}" end="${end}">
            <!-- 判断是否是当前页 -->
            <c:if test="${i == requestScope.page.pageCode}">
                <li class="active"><a href="javascript:void(0);">${i}</a></li>
            </c:if>
            <c:if test="${i != requestScope.page.pageCode}">
                <li>
                    <a href="<%=basePath%>/findByPage?pageCode=${i}&pageSize=${requestScope.page.pageSize}">${i}</a>
                </li>
            </c:if>
        </c:forEach>

        <li>
            <%--<c:if test="${requestScope.page.pageCode < requestScope.page.totalPage}">--%>
                <a href="<%=basePath%>/findByPage?pageCode=${requestScope.page.pageCode + 1}">&raquo;</a>
            <%--</c:if>--%>
        </li>
        <li>
            <a href="<%=basePath%>/findByPage?pageCode=${requestScope.page.totalPage}"><strong>末页</strong></a>
        </li>

    </ul>
    </div>
    </div>
    </form>
<div class="buysc">
    <a href="javascript:;" onclick="del_list()">删除选中的商品</a><span>应付商品总金额：<ins>¥<span id="total">0.00</span></ins></span>
    <a href="javascript:;" onclick="all_price()"><p>结算</p></a>
</div>
</div>
<script>
    $('.check_').click(function () {
        var price = 0.00
        $(".check_").each(function (i, e) {
            if ($(this).is(':checked')) {
                price += parseFloat($(this).attr('data'))
            }
        })
        $('#total').html(price.toFixed(2))
    })
    $(document).ready(function () {
        $("#c1").click(function () {

            $('input[type="checkbox"]').prop("checked", this.checked)
            if ($(this).is(':checked')) {
                var price = 0.00
                $(".price_one").each(function (i, e) {
                    price += parseFloat($(this).context.innerText);
                })
                $('#total').html(price.toFixed(2))
            } else {
                $('#total').html('0.00')
            }
        });

    })

    function all_price() {
        alert("总金额：" + $('#total').html())
    }

    function del_cart(id) {
        if (confirm("确认要删除该商品吗？")) {

            var data = {pid: id}
            $.ajax({
                url: "/del_card",
                data: data,
                type: "POST",
                dataType: "json",//指定返回格式，不指定则返回字符串
                success: function (result) {
                    console.log("success");
                    console.log(result);
                    var res = JSON.stringify(result)
                    if (res == 1) {
                        alert('删除成功')
                        location.reload()
                    }
                }
            })
        }
    }

    function del_list() {
        var ids = ''
        $('input[type="checkbox"]:checked').each(function (index, value) {
            if ($(value).val() != 'on') {
                ids += $(this).val() + ',';
            }
        });
        if (ids == '') {
            alert('未选择')
            return false
        }
        if (confirm("确认要删除选中所有商品吗？")) {
            var data = {ids: ids.substr(0, ids.length - 1)}
            console.log(ids);
            console.log(data);
            $.ajax({
                url: "/del_list_cart",
                data: data,
                type: "POST",
                success: function (result) {
                    var res = JSON.stringify(result)
                    if (res > 0) {
                        alert('删除成功')
                        location.reload()
                    }
                }
            })
        }
    }
</script>

<div class="footer">
    <p>华为集团　华为CBG官网　荣耀官网　花粉俱乐部　华为应用市场　EMUI华为终端　云空间　开发者联盟　华为商城　手机版　网站地图</p>
    <p>隐私声明 服务协议 COOKIES Copyright © 华为终端有限公司 版权所有 粤ICP备19015064号|粤公网安备 44190002003939号</p>
    <p>增值电信业务经营许可证：粤B2-20190762|备案主体编号：44201919072182</p>
</div>
</body>
</html>